<div class="pure-view-container">
  <div class="x-view-title">${t('ui.menu.common.title.menuManagement')}</div>
  <link href="${appCss('static/app/menu/menu-management.css')}" rel="stylesheet" />
  <div class="x-view-layout">
    <div class="menu-left-side">
      <div class="shadow bg-white rounded menu-tree-content">
        <div class="menu-tree-header"><span
            class="font-weight-bold">${t('ui.menu.common.text.menuStructure')}</span>
          <div class="menu-tool-bar"><span class="d-inline-block" tabindex="0" data-toggle="tooltip"
              title="${t('ui.menu.common.msg.swapTemplate')}"><button data-x-ui="swapTemplateBtn"
                type="button" class="btn btn-outline-primary btn-sm"><svg viewBox="64 64 896 896" focusable="false"
                  data-icon="swap" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                  <path
                    d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z">
                  </path>
                </svg></button></span><span class="d-inline-block" tabindex="0" data-toggle="tooltip"
              title="${t('ui.menu.common.msg.newMenu')}"><button data-x-ui="newMenuBtn" type="button"
                class="btn btn-outline-primary btn-sm" disabled=""><svg viewBox="64 64 896 896" focusable="false"
                  data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                  <path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path>
                  <path d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"></path>
                </svg></button></span></div>
        </div>
        <div class="menu-tree-body">
          <div data-x-ui="menuTree" class="menu-tree"></div>
        </div>
      </div>
    </div>
    <div class="menu-right-side">
      <div class="shadow p-3 bg-white rounded"><span
          class="font-weight-bold menu-table-title">${t('ui.menu.common.text.childMenus')}</span>
        <table data-x-ui="menuTable" class="x-table-custom" data-x-name="childMenuData" data-x-type="dataGrid">
          <thead>
            <tr>
              <th data-field="id" data-visible="false">ID</th>
              <th data-field="menuCode">${t('ui.menu.common.field.menuCode')}</th>
              <th data-field="menuName">${t('ui.menu.common.field.menuName')}</th>
              <th data-field="parentName">${t('ui.menu.common.field.parentName')}</th>
              <th data-field="menuIcon">${t('ui.menu.common.field.menuIcon')}</th>
              <th data-field="menuPath">${t('ui.menu.common.field.menuPath')}</th>
              <th data-field="menuOrder">${t('ui.menu.common.field.menuOrder')}</th>
              <th data-field="showFlagDesc">${t('ui.system.common.field.showFlag')}</th>
              <th data-field="remark">${t('ui.system.common.field.remark')}</th>
              <th>${t('ui.system.common.field.operate')}</th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
  </div>
  <div data-x-ui="newMenuDialog" class="modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">${t('ui.menu.common.dialog.newMenu')}</h5><button type="button"
            class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        </div>
        <div class="modal-body">
          <form><input type="hidden" id="templateId" name="templateId" data-x-name="new.templateId" /><input
              type="hidden" id="parentId" name="parentId" data-x-name="new.parentId" />
            <div class="form-group x-form-required"><label
                for="menuCode">${t('ui.menu.common.field.menuCode')}</label><input type="text"
                class="form-control" id="menuCode" name="menuCode" data-x-name="new.menuCode"
                placeholder="${t('ui.system.common.placeholder.inputCodeLimitLength', 1, 50)}" /></div>
            <div class="form-group x-form-required"><label
                for="menuName">${t('ui.menu.common.field.menuName')}</label><input type="text"
                class="form-control" id="menuName" name="menuName" data-x-name="new.menuName"
                placeholder="${t('ui.system.common.placeholder.inputTextLimitLength', 1, 20)}" /></div>
            <div class="form-group"><label
                for="parentName">${t('ui.menu.common.field.parentName')}</label><input type="text"
                class="form-control" id="parentName" name="parentName" data-x-name="new.parentName" disabled="" /></div>
            <div class="form-group"><label for="menuIcon">${t('ui.menu.common.field.menuIcon')}</label><input
                type="text" class="form-control" id="menuIcon" name="menuIcon" data-x-name="new.menuIcon"
                placeholder="${t('ui.system.common.placeholder.inputTextLimitLength', 0, 50)}" /></div>
            <div class="form-group x-form-required"><label
                for="menuPath">${t('ui.menu.common.field.menuPath')}</label><input type="text"
                class="form-control" id="menuPath" name="menuPath" data-x-name="new.menuPath"
                placeholder="${t('ui.system.common.placeholder.inputTextLimitLength', 1, 500)}" /></div>
            <div class="form-group x-form-required"><label
                for="menuOrder">${t('ui.menu.common.field.menuOrder')}</label><input type="text"
                class="form-control" id="menuOrder" name="menuOrder" data-x-name="new.menuOrder"
                placeholder="${t('ui.system.common.placeholder.inputDigits')}" /></div>
            <div class="form-group x-form-required"><label
                for="showFlag">${t('ui.system.common.field.showFlag')}</label><select class="form-control"
                id="showFlag" name="showFlag" data-x-name="new.showFlag">
                <option value="true" selected="">${t('ui.system.common.option.showFlag.true')}</option>
                <option value="false">${t('ui.system.common.option.showFlag.false')}</option>
              </select></div>
            <div class="form-group"><label for="remark">${t('ui.system.common.field.remark')}</label><input
                type="text" class="form-control" id="remark" name="remark" data-x-name="new.remark"
                placeholder="${t('ui.system.common.placeholder.inputTextLimitLength', 0, 200)}" /></div>
          </form>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-secondary x-btn-cancel"
            data-dismiss="modal">${t('ui.system.common.btn.cancel')}</button><button type="button"
            class="btn btn-primary x-btn-confirm">${t('ui.system.common.btn.save')}</button></div>
      </div>
    </div>
  </div>
  <div data-x-ui="editMenuDialog" class="modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">${t('ui.menu.common.dialog.editMenu')}</h5><button type="button"
            class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        </div>
        <div class="modal-body">
          <form><input type="hidden" id="id" name="id" data-x-name="edit.id" /><input type="hidden" id="templateId"
              name="templateId" data-x-name="edit.templateId" /><input type="hidden" id="parentId" name="parentId"
              data-x-name="edit.parentId" /><input type="hidden" id="versionNumber" name="versionNumber"
              data-x-name="edit.versionNumber" />
            <div class="form-group x-form-required"><label
                for="menuCode">${t('ui.menu.common.field.menuCode')}</label><input type="text"
                class="form-control" id="menuCode" name="menuCode" data-x-name="edit.menuCode"
                placeholder="${t('ui.system.common.placeholder.inputCodeLimitLength', 1, 50)}" /></div>
            <div class="form-group x-form-required"><label
                for="menuName">${t('ui.menu.common.field.menuName')}</label><input type="text"
                class="form-control" id="menuName" name="menuName" data-x-name="edit.menuName"
                placeholder="${t('ui.system.common.placeholder.inputTextLimitLength', 1, 20)}" /></div>
            <div class="form-group"><label for="parentName">${t('ui.menu.common.field.parentName')}</label>
              <div class="input-group"><input type="text" class="form-control" id="parentName" name="parentName"
                  data-x-name="edit.parentName" disabled="" />
                <div class="input-group-append"><button data-x-ui="chooseParentMenuBtn"
                    class="btn btn-outline-secondary"
                    type="button">${t('ui.system.common.btn.choose')}</button></div>
              </div>
            </div>
            <div class="form-group"><label for="menuIcon">${t('ui.menu.common.field.menuIcon')}</label><input
                type="text" class="form-control" id="menuIcon" name="menuIcon" data-x-name="edit.menuIcon"
                placeholder="${t('ui.system.common.placeholder.inputTextLimitLength', 0, 50)}" /></div>
            <div class="form-group x-form-required"><label
                for="menuPath">${t('ui.menu.common.field.menuPath')}</label><input type="text"
                class="form-control" id="menuPath" name="menuPath" data-x-name="edit.menuPath"
                placeholder="${t('ui.system.common.placeholder.inputTextLimitLength', 1, 500)}" /></div>
            <div class="form-group x-form-required"><label
                for="menuOrder">${t('ui.menu.common.field.menuOrder')}</label><input type="text"
                class="form-control" id="menuOrder" name="menuOrder" data-x-name="edit.menuOrder"
                placeholder="${t('ui.system.common.placeholder.inputDigits')}" /></div>
            <div class="form-group x-form-required"><label
                for="showFlag">${t('ui.system.common.field.showFlag')}</label><select class="form-control"
                id="showFlag" name="showFlag" data-x-name="edit.showFlag">
                <option value="true" selected="">${t('ui.system.common.option.showFlag.true')}</option>
                <option value="false">${t('ui.system.common.option.showFlag.false')}</option>
              </select></div>
            <div class="form-group"><label for="remark">${t('ui.system.common.field.remark')}</label><input
                type="text" class="form-control" id="remark" name="remark" data-x-name="edit.remark"
                placeholder="${t('ui.system.common.placeholder.inputTextLimitLength', 0, 200)}" /></div>
          </form>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-secondary x-btn-cancel"
            data-dismiss="modal">${t('ui.system.common.btn.cancel')}</button><button type="button"
            class="btn btn-primary x-btn-confirm">${t('ui.system.common.btn.save')}</button></div>
      </div>
    </div>
  </div>
  <div data-x-ui="chooseMenuDialog" class="modal x-dialog2" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">${t('ui.menu.common.dialog.chooseMenu')}</h5><button type="button"
            class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        </div>
        <div class="modal-body">
          <div data-x-ui="menuChooseTree" class="menu-choose-tree"></div>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-secondary x-btn-cancel"
            data-dismiss="modal">${t('ui.system.common.btn.cancel')}</button><button type="button"
            class="btn btn-primary x-btn-confirm">${t('ui.system.common.btn.save')}</button></div>
      </div>
    </div>
  </div>
  <div data-x-ui="assignFunctionDialog" class="modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">${t('ui.menu.common.dialog.assignFunction')}</h5><button type="button"
            class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        </div>
        <div class="modal-body">
          <form>
            <nav>
              <div class="nav nav-tabs" role="tablist"><button data-x-ui="assignedFunctionNavTab"
                  class="nav-link active" type="button" role="tab"
                  data-toggle="tab">${t('ui.menu.assignFunctionDialog.tab.assignedFunction')}</button><button
                  data-x-ui="assignableFunctionNavTab" class="nav-link" type="button" role="tab" data-toggle="tab"
                  disabled="">${t('ui.menu.assignFunctionDialog.tab.assignableFunction')}</button></div>
            </nav>
            <div class="tab-content">
              <div data-x-ui="assignedFunctionTabPane" class="tab-pane fade show active" role="tabpanel">
                <table data-x-ui="assignedFunctionTable" class="x-table-custom" data-x-name="assignedFunctions"
                  data-x-type="dataGrid">
                  <thead>
                    <tr>
                      <th data-field="id" data-visible="false">ID</th>
                      <th data-field="functionCode">${t('ui.security.function.field.functionCode')}</th>
                      <th data-field="functionName">${t('ui.security.function.field.functionName')}</th>
                      <th data-field="remark">${t('ui.system.common.field.remark')}</th>
                      <th>${t('ui.system.common.field.operate')}</th>
                    </tr>
                  </thead>
                </table>
              </div>
              <div data-x-ui="assignableFunctionTabPane" class="tab-pane fade" role="tabpanel">
                <div class="x-search-bar">
                  <form>
                    <div class="form-row align-items-center">
                      <div class="col-auto"><label class="sr-only" for="functionCode"></label>
                        <div class="input-group mb-2">
                          <div class="input-group-prepend">
                            <div class="input-group-text">${t('ui.security.function.field.functionCode')}
                            </div>
                          </div><input type="text" class="form-control" id="functionCode"
                            data-x-name="searchFunctionField.functionCode" data-x-type="autoTrimText" />
                        </div>
                      </div>
                      <div class="col-auto"><label class="sr-only" for="functionName"></label>
                        <div class="input-group mb-2">
                          <div class="input-group-prepend">
                            <div class="input-group-text">${t('ui.security.function.field.functionName')}
                            </div>
                          </div><input type="text" class="form-control" id="functionName"
                            data-x-name="searchFunctionField.functionName" data-x-type="autoTrimText" />
                        </div>
                      </div>
                      <div class="col-auto"><button type="button" class="btn btn-primary mb-2"
                          data-x-ui="searchFunctionBtn">${t('ui.system.common.btn.search')}</button></div>
                    </div>
                  </form>
                </div>
                <table data-x-ui="assignableFunctionTable" class="x-table-custom">
                  <thead>
                    <tr>
                      <th data-checkbox="true"></th>
                      <th data-field="id" data-visible="false">ID</th>
                      <th data-field="functionCode">${t('ui.security.function.field.functionCode')}</th>
                      <th data-field="functionName">${t('ui.security.function.field.functionName')}</th>
                      <th data-field="remark">${t('ui.system.common.field.remark')}</th>
                      <th>${t('ui.system.common.field.operate')}</th>
                    </tr>
                  </thead>
                </table>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-secondary x-btn-cancel"
            data-dismiss="modal">${t('ui.system.common.btn.cancel')}</button><button type="button"
            class="btn btn-primary x-btn-confirm">${t('ui.system.common.btn.save')}</button></div>
      </div>
    </div>
  </div>
  <script src="${appJs('app/common/js/table-selection-tabs.js')}" type="text/javascript"></script>
  <script src="${appJs('app/menu/common/convert-to-tree-data.js')}" type="text/javascript"></script>
  <script src="${appJs('app/menu/tree-menu-structure.js')}" type="text/javascript"></script>
  <script src="${appJs('app/menu/dialog/assign-function-dialog.js')}" type="text/javascript"></script>
  <script src="${appJs('app/menu/dialog/new-menu-dialog.js')}" type="text/javascript"></script>
  <script src="${appJs('app/menu/dialog/edit-menu-dialog.js')}" type="text/javascript"></script>
  <script src="${appJs('app/menu/menu-management.js')}" type="text/javascript"></script>
</div>